@import './commonM/_infiniteScroll.less';

.navigationNo3{
    margin:55px 0 0 0;
    .sub-title{
        font-size: 14px;
        line-height: 20px;
        margin:0 0 25px 0;
    }
    h3{
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #121212;
        line-height: 20px;
        margin:0 0 15px 0;
    }
    .rank-list{
        margin:0 0 24px 0;
        li{
            width: 327px;
            height: 57px;
            background: #FFFFFF;
            border-radius: 10px;
            border: 1px solid #E4E4E4;
            margin:0 0 12px 0;
            &:last-child{
                margin:0;
            }
        }
        .sub-channel{
            display: flex;
            align-items: center;
            width: 327px;
            height: 57px;
            padding:0 16px;
        }
        .icon{
            background-size: 27px 24px;
            width: 27px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            margin:0 8px 0 0;
            font-size:9px;
            font-family:'Roboto-Bold';
        }
        .channel-title{
            font-size: 14px;
            color: #121212;
            letter-spacing: 0.5px;
            line-height: 16px;
            font-weight: bold;
            font-family:'Roboto-Medium';
            flex:1;
        }
        .icon1{
            color:#FA3D5B;
            background-image: url(../images/index/mobile/order1@3x.png);
        }
        .icon2{
            color:#CA53FF;
            background-image: url(../images/index/mobile/order2@3x.png);
        }
        .icon3{
            color:#FFAA4A;
            background-image: url(../images/index/mobile/order3@3x.png);
        }
        .icon4{
            color:#177FE9;
            background-image: url(../images/index/mobile/order4@3x.png);
        }
        .star{
            display: flex;
            .blue,.half,.gray{
                width: 15px;
                height: 14px;
                background-size: 15px 14px;
                margin:0 1px 0 0;
                display: inline-block;
            }
            .blue{
                background-image: url("../images/0BF31614-20FC-4D52-BFC5-691D6EAE7B03@2x.png");
            }
            .half{
                background-image: url("../images/331974AE-E488-435E-97BD-0A6849B35E40@2x.png");
            }
            .gray{
                background-image: url("../images/95EA68AB-A5E8-4829-8E05-989D4C143461@2x.png");
            }
        }
    }
    .view-more{
        margin:0 0 27px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        a{
            width: 72px;
            height: 16px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #177FE9;
            line-height: 16px;
            margin:0 8px 0 0;
        }
        i{
            width: 8px;
            height: 14px;
            display: inline-block;
            background: url("../images/editors/arrow-down-s-line@2x.png") no-repeat center / 8px 14px;
        }
    }
    .production-list{
        margin:0 0 64px 0;
    }
    .production-detail{
        width: 327px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #E4E4E4;
        padding:13px 16px;
        margin:0 0 10px 0;
        .sub-channel{
            display: flex;
            justify-content: space-between;
            margin:0 0 13px 0;
            align-items: center;
        }
        .channel-title{
            width: 255px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #121212;
            line-height: 14px;
        }
        i{
            width: 6px;
            height: 18px;
            display: inline-block;
            background: url("../images/navigation/mobile/arrow-down-s-line2@2x.png") no-repeat center / 6px 8px;
        }
        .img-details{
            display: flex;
            justify-content: space-between;
            >a{
                width: 91px;
            }
            .img-show{
                width: 91px;
                height: 91px;
                display: block;
                overflow: hidden;
                margin: 0 0 5px 0;
                img{
                    width: 91px;
                    height: 91px;
                    border-radius: 10px;
                    border: 1px solid #E4E4E4;
                }
            }
            .rank1,.rank2,.rank3{
                font-size: 11px;
                font-weight: 400;                
                line-height: 11px;
                padding-left:15px;
                margin:0 0 5px 0;
                background-repeat: no-repeat;
                background-size: 9px 10px;
            }
            .rank1{
                color: #FA3D5B;
                background-image: url("../images/navigation/mobile/ic_1@2x.png");
            }
            .rank2{
                color: #DC3BFF;
                background-image: url("../images/navigation/mobile/ic_2@2x.png");
            }
            .rank3{
                color: #FFAA4A;
                background-image: url("../images/navigation/mobile/ic_3@2x.png");
            }
            .name{
                height: 32px;
                font-size: 12px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #333333;
                line-height: 16px;
                -webkit-line-clamp:2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                margin:0 0 5px 0;
            }
            .price{
                width: 26px;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #FA3D5B;
                line-height: 14px;
            }
        }
    }
}